<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    rentRangeList: {
      type: Array,
      default: () => []
    }
  })

  const onSelect = (item) => {
    if (item.id === 0) {
      props.rentRangeList.forEach((item) => {
        item.isSelected = false
      })
      item.isSelected = true
      return
    }
    item.isSelected = !item.isSelected
    props.rentRangeList[0].isSelected = false
  }

  // 计算选择的价格区间
  const selectedPriceList = computed(() => {
    return props.rentRangeList.filter((item) => item.isSelected)
  })

  defineExpose({
    selectedPriceList
  })
</script>

<template>
  <view class="filter-by-price">
    <view
      class="filter-by-price-item filter-cell-item"
      v-for="item in props.rentRangeList"
      :key="item.id"
      :class="{ active: item.isSelected }"
      @click="onSelect(item)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .filter-by-price {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0 40rpx;
  }
</style>
